<template>
	<view class="page" @touchstart="start" @touchmove="move" @touchend="end">
		<cu-bg-snow></cu-bg-snow>
		<view class="box" :style="[{transform: 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)'}]"
			@click="is_open=!is_open">
			<view class="minbox" v-if="info.images">
				<image v-for="(item,index) in info.images[0]" :key="index" class="img" :src="item" mode="aspectFill"></image>
			</view>
			<view class="maxbox" v-if="info.images">
				<image class="img" v-for="(item,index) in info.images[1]" :key="index" :src="item" mode="aspectFill" :class="{'open':is_open}"></image>
			</view>
		</view>
		<cu-bg-music :info="info"></cu-bg-music>
	</view>
</template>

<script>	
	export default {
		onLoad(e) {	
			this.id = e.id || '';
			this.pid = e.pid || '';
			this.getPhotosIndex(()=>{
				setInterval(() => {
					if (this.is_auto) this.rotateY += 0.1;
				}, 1)	
			});					
		},		
		data() {
			return {
				id:'',
				pid:'',
				info:{},
				is_open: false,	
				rotateX: 13,
				rotateY: 360,
				x: 0,
				y: 0,
				is_auto: true
			}
		},		
		methods: {			
			start(e) {
				this.is_auto = false;
				this.x = e.changedTouches[0].clientX;
				this.y = e.changedTouches[0].clientY;
			},
			move(e) {
				let x = e.changedTouches[0].clientX;
				let y = e.changedTouches[0].clientY;
				this.rotateX += (y - this.y) * 0.3;
				this.rotateY += (x - this.x) * 0.3;
				//增量
				this.x = x;
				this.y = y;
			},
			end(e) {
				this.is_auto = true;
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 75vh;
		width: 100%;
	}

	.box {
		width: 400rpx;
		height: 400rpx;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;
		position: relative;
		transform: rotateX(13deg);
		transform-style: preserve-3d;	
		z-index: 100;

		.maxbox {
			transform-style: preserve-3d;

			.img {
				width: 400rpx;
				height: 400rpx;
				background: #fff;
				border: 1px solid #ccc;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0.2;
				transition: all 1s ease;
				z-index: 100;

				&:nth-child(1) {
					transform: translateZ(200rpx);
				}

				&:nth-child(2) {
					transform: translateZ(100rpx);
				}

				&:nth-child(3) {
					transform: rotateX(-90deg) translateZ(100rpx);
				}

				&:nth-child(4) {
					transform: rotateX(90deg) translateZ(100rpx);
				}

				&:nth-child(5) {
					transform: rotateY(-90deg) translateZ(100rpx);
				}

				&:nth-child(6) {
					transform: rotateY(90deg) translateZ(100rpx);
				}

				&:nth-child(2) {
					transform: rotateX(180deg) rotateZ(180deg) translateZ(200rpx);
				}

				&:nth-child(3) {
					transform: rotateX(-90deg) translateZ(200rpx);
				}

				&:nth-child(4) {
					transform: rotateX(90deg) translateZ(200rpx);
				}

				&:nth-child(5) {
					transform: rotateY(-90deg) translateZ(200rpx);
				}

				&:nth-child(6) {
					transform: rotateY(90deg) translateZ(200rpx);
				}

				&.open {
					opacity: 1;

					&:nth-child(1) {
						transform: translateZ(280rpx);
					}

					&:nth-child(2) {
						transform: rotateX(180deg) rotateZ(180deg) translateZ(280rpx);
					}

					&:nth-child(3) {
						transform: rotateX(-90deg) translateZ(280rpx);
					}

					&:nth-child(4) {
						transform: rotateX(90deg) translateZ(280rpx);
					}

					&:nth-child(5) {
						transform: rotateY(-90deg) translateZ(280rpx);
					}

					&:nth-child(6) {
						transform: rotateY(90deg) translateZ(280rpx);
					}
				}
			}
		}

		.minbox {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			left: 100rpx;
			top: 60rpx;
			transform-style: preserve-3d;

			.img {
				width: 200rpx;
				height: 200rpx;
				position: absolute;
				left: 0;
				top: 0;

				&:nth-child(1) {
					transform: translateZ(100rpx);
				}

				&:nth-child(2) {
					transform: rotateX(180deg) rotateZ(180deg) translateZ(100rpx);
				}

				&:nth-child(3) {
					transform: rotateX(-90deg) translateZ(100rpx);
				}

				&:nth-child(4) {
					transform: rotateX(90deg) translateZ(100rpx);
				}

				&:nth-child(5) {
					transform: rotateY(-90deg) translateZ(100rpx);
				}

				&:nth-child(6) {
					transform: rotateY(90deg) translateZ(100rpx);
				}
			}
		}
	}
</style>
